/**
 * useCallback要与memo一起用
 */

import { Button } from "antd";
import { memo, useCallback, useState } from "react";

interface ShippingFormProps {
  onSubmit: () => void;
}
const ShippingForm = memo<(props: ShippingFormProps) => JSX.Element>(({ onSubmit }) => {
  console.log("ShippingForm");

  return (
    <Button type="primary" onClick={onSubmit}>
      提交
    </Button>
  );
});

function ProductPage() {
  const [count, setCount] = useState<number>(1);

  const handleSubmit = useCallback(() => {
    console.log(111);
  }, []);

  return (
    <>
      <h4>测试useCallback二次渲染</h4>
      <span>Nums:{count}</span>&nbsp;
      <Button onClick={() => setCount(count => count + 1)}>+</Button>
      <br />
      <ShippingForm onSubmit={handleSubmit} />
    </>
  );
}
export default ProductPage;
